<template>
  <div class="navForm">
    <el-card
      class="box-card"
      style="width:1000px;margin:0 auto;padding:50px 100px"
    >
      <el-form
        :rules="rules"
        ref="ruleForm"
        label-width="140px"
        class="demo-ruleForm"
      >
        <!-- 品牌名称： -->
        <el-form-item label="品牌名称：" prop="name">
          <el-input v-model="ruleForm.name"></el-input>
        </el-form-item>
        <!-- 品牌首字母： -->
        <!-- <el-form-item label="品牌首字母：" prop="Initials">
          <el-input v-model="ruleForm.Initials"></el-input>
        </el-form-item> -->
        <!-- 上传图片 logo -->
        <el-form-item label="品牌LOGO：">
          <el-upload
            class="upload-demo"
            action="/dev-api/admin/product/fileUpload"
            :on-success="handlesuccess"
            :on-preview="handlePreview"
            :on-remove="handleRemove"
            list-type="picture"
            :limit="1"
          >
            <el-button size="small" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">
              只能上传一张图片！！！jpg/png文件，且不超过10MB
            </div>
          </el-upload>
        </el-form-item>
        <!--上传图片 大图  -->
        <!-- <el-form-item label="品牌专区大图：">
          <el-upload
            class="upload-demo"
            action="https://jsonplaceholder.typicode.com/posts/"
            :on-preview="handlePreview"
            :on-remove="handleRemove"
            :file-list="fileList2"
            list-type="picture"
          >
            <el-button size="small" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">
              只能上传jpg/png文件，且不超过10MB
            </div>
          </el-upload>
        </el-form-item> -->
        <!-- 品牌故事 -->
        <!-- <el-form-item label="品牌故事：">
          <el-input
            type="textarea"
            cols="83px"
            placeholder="请输入内容"
            v-model="ruleForm.textarea"
          >
          </el-input>
        </el-form-item> -->
        <!-- 排序 -->
        <el-form-item label="排序：" prop="sort">
          <el-input v-model="ruleForm.sort"></el-input>
        </el-form-item>

        <!-- 是否显示 -->
        <!-- <el-form-item label="是否显示" prop="">
          <el-radio-group v-model="ruleForm.displays">
            <el-radio label="是"></el-radio>
            <el-radio label="否"></el-radio>
          </el-radio-group>
        </el-form-item> -->
        <!-- 品牌制造商 -->
        <el-form-item label="品牌制造商" prop="">
          <el-radio-group v-model="ruleForm.Manufacturings">
            <el-radio label="是"></el-radio>
            <el-radio label="否"></el-radio>
          </el-radio-group>
        </el-form-item>
        <!--  -->
        <el-form-item label="">
          <el-button type="primary" @click="addSku">提交</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
export default {
  name: "AddList",
  data() {
    return {
      // 收集表单数据
      ruleForm: {
        name: "", //品牌名称
        Initials: "", //品牌首字母
        textarea: "", //品牌故事
        sort: "", //排序
        displays: "是", //是否显示
        Manufacturings: "是" //是否品牌商
      },
      // 表单验证
      rules: {
        name: [
          // { required: true, message: "请输入品牌名称", trigger: "blur" },
          {
            min: 1,
            max: 140,
            message: "长度在 1 到 140 个字符",
            trigger: "blur"
          }
        ]
        // sort: [{ required: true, message: "值必须为数字", trigger: "blur" }]
      },
      //图片上传地址暂存
      // logo
      fileList1: ""
    };
  },
  methods: {
    // 图片上传
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file);
    },

    // 图片上传成功钩子
    handlesuccess(response, file, fileList) {
      this.fileList1 = response.data;
    },

    // 添加SKU
    async addSku() {
      const { name, sort, Manufacturings } = this.ruleForm;
      let isNor = true;
      if (Manufacturings == "是") {
        isNor = true;
      } else {
        isNor = false;
      }
      const data = {
        // id: 13,
        trade: name,
        brandId: sort,
        trandeImg: this.fileList1,
        code: isNor
      };

      // this.$store.dispatch("AddSku", data);
      try {
        const results = await this.$API.mockAddSku(data);
        console.log(results);
        if (results.status == 200) {
          this.$message({
            message: "恭喜你，添加信息成功！",
            type: "success"
          });
          this.$router.push({ path: "/sku/sku" });
        }
      } catch (err) {
        this.$message.error("添加失败！请刷新后重试！");
      }
    }
  }
};
</script>

<style lang="less" scoped>
// .navForm {
//   width: 600px;
//   border: 1px solod red;
// }
</style>
